<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					    【文本和图片垂直居中（对齐）效果】
						对齐分为四种：基线对齐、顶部对齐
						             居中对齐、底部对齐
						元素种类：块元素、行元素、行内块元素
						块元素特点：独占一行、设置宽高
						行元素特点：一行内显示、不可设置宽高
						网页：元素之间嵌套生成
						行元素与块元素可以任意嵌套
						前提：设置宽高---行套块
						             ---块套块   √
									 ---块套行   √
						前提：一行内显示---行套块  √
						               ---块套块  ×
									   ---块套行  √ 
									   ---行套行  √
			 -->
			 <style>
				  im g:nth-child(1){
					 /* vertical-align: :baseline 默认基线对齐*/
					 vertical-align: baseline;
				 }
			      i mg:nth-child(2){
					 /* vertical-align: :baseline 默认基线对齐*/
					 vertical-align: top;
					 width: 500px;
					 height: 500px;
					 background: #eee2ec;
				 }
				 img.basekine{
					 vertical-align: baseline;
				 }
				 img.top{
					 vertical-align: top;
				 }
				 img.middle{
					 vertical-align: middle;
				 }
				 img.bottom{
					 vertical-align: bottom;
				 }
			 </style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字：图片叫什么名字
		                    文字后加img，设定宽高：：25~100px
							每个图片后边加：基线对齐、顶部对齐
							居中对齐、底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>云宝<img class="baseline" src="img/云宝.png" alt="云宝" width="100px" height="100px"/>基线对齐</p>
		 <p>柔柔<img class="top" src="img/柔柔.png" alt="柔柔" width="100px" height="100px"/>顶部对齐</p>
		 <p>碧琪<img class="middle" src="img/碧琪.png" alt="碧琪" width="100px" height="100px"/>居中对齐</p>
		 <p>珍奇<img class="bottom" src="img/珍奇.png" alt="珍奇" width="100px" height="100px"/>底部对齐</p>
		<!-- css选择器--抓第一张照片
		  思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		  错位原因：html结构不符合派生特点：p包含4个img
		           伪类选择器，4个img需要在一个p中
		  p img:nth-child(1) -->
		 
	</body>
</html>